<template>
    <div class="singerMvsList">
        <div class="mvsBox">
            <div
                class="mvsItme"
                v-for="item in mvsList.slice(0, mvsCurrentPage * 12)"
            >
                <div class="img-box">
                    <img
                        src="../../assets/images/lazyLoading1.gif"
                        alt=""
                        :data-img="item.imgurl"
                        ref="imgs"
                    />
                    <div class="mvs-info">
                        <div class="artisName">
                            {{ item.artistName }}
                        </div>
                        <div class="mvs-time">
                            {{ formatTime(item.duration) }}
                        </div>
                    </div>
                    <div class="msv-playCount">
                        <i class="el-icon-caret-right"></i>
                        <span>{{ item.playCount }}</span>
                    </div>
                    <div class="hidden-play">
                        <div class="hidden-play">
                            <img
                                src="../../assets/images/btn-play.png"
                                alt=""
                            />
                        </div>
                    </div>
                </div>
                <div class="mvs-content">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <div class="poll" ref="poll2">
            <img src="../../assets/images/loading2.gif" alt="" />
        </div>
    </div>
</template>

<script>
import { log } from "util";
import { createNamespacedHelpers } from "vuex";
import { formatTime, debounce, lazyload } from "../../utils/common";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "singerDetails"
);
export default {
    data() {
        return {
            loading: false,
            //mv手动分页
            mvsCurrentPage: 1,
        };
    },
    computed: {
        ...mapState(["mvsList"]),
    },
    created() {
        this.formatTime = formatTime;
        this.lazyLoading= debounce(this.changeCurrentPage, 500)
        window.addEventListener(
            "scroll",
           this.lazyLoading,
            false
        );
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevY = 0;
    },
    mounted() {
        this.getArtistMv(this.$route.params._id);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.lazyLoading);
    },
    methods: {
        ...mapActions(["getArtistMv"]),
        ...mapMutations(["changeMvsList"]),
        changeCurrentPage() {
            if (window.scrollY > this.prevY) {
                console.log(this.$refs.poll2);
                lazyload(this.$refs.imgs);
                //记录单向锁，防止向上滚动也触发事件
                this.prevY = window.scrollY;
                if (
                    //如果占位符距离顶部的距离小于窗口，就证明这个占位符出现在了用户视野里
                    //就可以发送ajax了
                    this.$refs.poll2.getBoundingClientRect().top <
                    window.innerHeight
                ) {
                    //请求下一页数据
                    this.mvsCurrentPage++;
                }
            }
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/singerMvList.scss";
</style>